<template lang="pug">
  .wrap(v-loading="loading")
    .list-wrap(v-show="menuSum!==0")
      .list-btn-left(@click="slide(true)") <
      .list(
        v-show="isshow"
        ref='showList')
        ul(
          ref="nodeList"
          :style="{'transform':'translate('+translateX+'px)'}")
          li.list-item(
            v-for="(item, index) in listData"
            :key="index"
            @click="changeContent(item.type, item.typeId, item.typeName, index)")
            .list-item-icon(:style="{'background-color':actIndex===index?'#29a1f7':'#95caff'}")
              .list-item-char(v-text="item.lifeCycleChar")
            .list-item-content
              .list-item-top(v-text="item.typeName")
              .list-item-bottom(v-text="time(item.eventTime)")
            img.list-item-arrow(
              :src="actIndex===index?arrowActiveSrc:arrowSrc")
      .list-btn-right(@click="slide(false)") >
    .wrap-content(v-show="menuSum!==0")
      ul.wrap-menu
        li.menu-item(
          :class="{'menu-item-zero':menuSum==0,'menu-item-active':activeMenuItem=='all'}"
          @click="changeActiveType({label:'all'})")
          span.menu-item-label 全部
          span.menu-item-count {{menuSum}}
        li.menu-item(
          v-for="(item, index) in menuitems"
          v-show="item.name"
          :key="'li'+index"
          :class="{'menu-item-zero':item.count==0,'menu-item-active':activeMenuItem==item.label}"
          @click="changeActiveType(item)")
          span.menu-item-label {{item.name}}
          span.menu-item-count {{item.count}}
      .content-data
        .content-title(
          v-show="title!==''"
          v-text="title + '详细信息'")
        importantInfo(
          :columns="columns"
          :infoList="infoList"
          :formValues="infoValue"
          style="height:450px;border:none")
    h5.notice-text(v-if="menuSum===0") 该设备暂无记录
</template>

<script>
import { httpGet } from '@/utils/api'
import ImportantInfo from '@/components/ImportantInfo'
import { map, filter, sumBy, toArray } from 'lodash'
import arrowRight from '../../../../assets/img/arrow_nornal.png'
import arrowActive from '../../../../assets/img/arrow_active.png'
export default {
  name: 'DeviceLifeCycle',
  components: {
    ImportantInfo
  },
  props: {
    siteId: {
      type: Number
    }
  },
  data () {
    console.log(this.siteId)
    return {
      actIndex: 0,
      loading: true,
      isshow: false,
      title: '',
      listData: [],
      contentData: [],
      infoList: [],
      infoValue: {},
      // 统计各tab的数量
      transmissionCount: [],
      columnSize: [
        { type: 'md', size: '12' },
        { type: 'sm', size: '12' }
      ],
      columns: {
        installTime: {
          label: '安装时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        address: {
          label: '安装地址',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ]
        },
        longitude: {
          label: '经度',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        latitude: {
          label: '纬度',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        picList: {
          label: '图片',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ],
          file: true
        },
        accList: {
          label: '附件',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ],
          file: true
        },
        remark: {
          label: '备注',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        deviceCode: {
          label: '设备编号',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        faultTime: {
          label: '故障时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        faultDesc: {
          label: '故障描述',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        maintainTime: {
          label: '处理时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        maintainDesc: {
          label: '处理措施',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        maintainPerson: {
          label: '处理人',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        inspectTime: {
          label: '巡检时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        inspectPerson: {
          label: '巡检人',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        inspectResult: {
          label: '巡检结果',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        inspectAddress: {
          label: '巡检地址',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ]
        },
        dismantleTime: {
          label: '拆除时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        dismantlePerson: {
          label: '拆除人',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        dismantleRemark: {
          label: '拆除原因',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        scrapTime: {
          label: '报废时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        scrapRemark: {
          label: '报废原因',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        simId: {
          label: '通讯卡号',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        sendInterval: {
          label: '发送间隔',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ]
        },
        collectInterval: {
          label: '采集间隔',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        collectInstallWay: {
          label: '安装方式',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        collectProducer: {
          label: '采集器厂家',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        systemName: {
          label: '对接系统名称',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        tablePosition: {
          label: '测量表位置',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        commPartPosition: {
          label: '通讯部位位置',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        exhibitor: {
          label: '提出人',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        proposalTime: {
          label: '提出时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        createUserId: {
          label: '创建人',
          relation: 'users',
          // render: 'select',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        createTime: {
          label: '创建时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm:ss',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        updateUserId: {
          label: '修改人',
          relation: 'users',
          // render: 'select',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        updateTime: {
          label: '修改时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm:ss',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        diameter: {
          label: '口径',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ],
          form: {
            type: 'text'
          },
          render: (prop) => {
            return prop.data ? 'DN' + prop.data : '-'
          }
        },
        manufacturer: {
          label: '厂家',
          // wangrf
          // form: {
          //   type: 'text'
          // },
          // relation: 'manufacturer',
          // render: {
          //   type: 'select'
          // },
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        measureType: {
          label: '测量类型',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '12' }
          ]
        },
        checkUnit: {
          label: '校验单位',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入校验单位'
            }]
          },
          filter: {
            type: 'input'
          }
        },
        credNumber: {
          label: '证书编号',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入证书编号'
            }]
          },
          filter: {
            type: 'input'
          }
        },
        credTime: {
          label: '证数日期',
          form: {
            type: 'date',
            dateType: 'datetime',
            rules: [{
              type: 'required',
              message: '请输入证数日期'
            }]
          },
          filter: {
            type: 'date'
          },
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm'
        },
        precisions: {
          label: '精度',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入精度'
            },
            {
              type: 'reg',
              value: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/,
              message: '请输入浮点型数据'
            }]
          },
          filter: {
            type: 'input'
          }
        },
        checkResult: {
          label: '校验结果',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入结果'
            }]
          },
          filter: {
            type: 'input'
          }
        },
        sendCheckPerson: {
          label: '送校人',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入送校人'
            }]
          },
          filter: {
            type: 'input'
          }
        }
      },
      chsNamelist: {
        all: '全部',
        deviceCheck: '设备检定',
        deviceInStock: '仪表入库',
        deviceInstall: '安装使用',
        deviceMaintain: '设备维护',
        deviceDismantle: '拆除记录',
        deviceScrap: '报废记录',
        deviceInspect: '定期巡检',
        deviceCollect: '数据对接',
        deviceAccessory: '附属设备'
      },
      activeMenuItem: 'all',
      menuitems: [],
      menuSum: 0,
      lifeNodeList: [],
      arrowSrc: arrowRight,
      arrowActiveSrc: arrowActive,
      translateX: 0
    }
  },
  // computed: {
  //   reverseLifeNodeList () {
  //     return this.lifeNodeList.reverse()
  //   }
  // },
  mounted () {
    this.getNodeList()
    this.getStat()
  },
  watch: {
    activeMenuItem (val, oldval) {
      this.lifeNodeList = this.listData
      if (val !== 'all') {
        this.lifeNodeList = filter(this.lifeNodeList, (o) => {
          return o.type === val
        })
      }
      const item = this.lifeNodeList[this.lifeNodeList.length - 1]
      this.changeContent(item.type, item.typeId, item.typeName, this.lifeNodeList.length - 1)
    }
  },
  methods: {
    time: function (value) {
      const date = new Date(value)
      let Y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m < 10) { m = '0' + m }
      if (d < 10) { d = '0' + d }
      const t = Y + '-' + m + '-' + d
      return t
    },
    changeContent: function (type, typeId, typeName, actIndex) {
      httpGet({
        url: 'pn/base/' + type + '/' + typeId,
        params: {}
      }).then(data => {
        this.title = typeName
        if (type === 'deviceInstall') {
          this.infoList = ['deviceCode', 'installTime', 'address', 'tablePosition', 'commPartPosition', 'remark', 'picList', 'accList']
        } else if (type === 'deviceMaintain') {
          this.infoList = ['deviceCode', 'faultTime', 'faultDesc', 'maintainPerson', 'maintainTime', 'maintainDesc', 'exhibitor', 'proposalTime', 'remark', 'picList', 'accList']
        } else if (type === 'deviceInspect') {
          this.infoList = ['inspectPerson', 'inspectTime', 'inspectAddress', 'inspectResult', 'picList', 'accList']
        } else if (type === 'deviceDismantle') {
          this.infoList = ['dismantlePerson', 'dismantleTime', 'dismantleRemark', 'picList', 'accList']
        } else if (type === 'deviceScrap') {
          this.infoList = ['scrapTime', 'scrapRemark', 'picList', 'accList']
        } else if (type === 'deviceCollect') {
          this.infoList = ['simId', 'sendInterval', 'collectInterval', 'collectInstallWay', 'collectProducer', 'systemName', 'remark']
        } else if (type === 'deviceInStock') {
          this.infoList = ['deviceCode', 'diameter', 'manufacturer', 'measureType', 'picList', 'accList']
        } else if (type === 'deviceCheck') {
          this.infoList = ['checkUnit', 'credNumber', 'credTime', 'precisions', 'checkResult', 'sendCheckPerson', 'picList', 'accList']
        }
        this.infoValue = data
        this.actIndex = actIndex
        this.getRelation()
      })
    },
    changeActiveType (item) {
      if (item.count === 0) {
        return
      }
      this.activeMenuItem = item.label
      this.listRePosition()
    },
    getNodeList () {
      this.loading = true
      httpGet({
        url: `pn/base/deviceLifeCycle/siteLifeCycle/${this.siteId}`
      }).then(({ data, count }) => {
        this.loading = false
        this.transmissionCount = count
        this.listData = data.reverse()
        this.lifeNodeList = data
        if (data) {
        // 左侧列表请求数据成功，默认触发changeContent方法
          this.changeContent(data[data.length - 1].type, data[data.length - 1].typeId, data[data.length - 1].typeName, this.lifeNodeList.length - 1)
          // 控制请求数据成功时，生命周期内的内容显示
          this.isshow = true
        }
        this.listRePosition()
      })
    },
    getStat () {
      this.loading = true
      this.$get({
        url: `/pn/base/deviceLifeCycle/siteStat?siteId=${this.siteId}`
      }).then(data => {
        this.loading = false
        this.menuitems = {...data.data}
        this.menuSum = sumBy(toArray(this.menuitems), o => (o.count))
        map(this.menuitems, (item) => {
          item.name = this.chsNamelist[item.label]
          return item
        })
        this.listRePosition()
      })
    },
    getRelation () {
      this.$getRelation({
        relations: 'manufacturer'
      }).then(({ manufacturer }) => {
        manufacturer.map((item) => {
          if (item.value === this.infoValue.manufacturer) {
            this.infoValue.manufacturer = item.label
          }
        })
      })
    },
    // 给nodeList列表定位
    listRePosition () {
      this.$nextTick(() => {
        const start = this.$refs.showList.offsetWidth - this.$refs.nodeList.offsetWidth
        if (start >= 0) this.translateX = 0
        else this.translateX = start
      })
    },
    slide (isLeft) {
      const speed = 167
      if (isLeft) {
        if (this.translateX + speed >= 0) this.translateX = 0
        else this.translateX += speed
      } else {
        if ((this.translateX - speed) <= this.$refs.showList.offsetWidth - this.$refs.nodeList.offsetWidth) this.translateX = this.$refs.showList.offsetWidth - this.$refs.nodeList.offsetWidth
        else this.translateX -= speed
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.wrap
  width: 100%
  height: 100%
  padding: 20px
  display: flex
  flex-direction: column
  h5.notice-text
    text-align: center
  .list-wrap
    min-height: 60px
    padding: 5px 0
    display: flex
    align-items: center
    .list-btn-left,.list-btn-right
      width: 18px
      height: 40px
      background-color: #d3dae0
      color: #fff
      line-height: 40px
      text-align: center
      font-size: 16px
      cursor: pointer
      user-select: none
    .list
      height: 56px
      min-height: 56px
      width: 100%
      overflow-y: hidden
      overflow-x: hidden
      align-items: center
      white-space: nowrap
      margin: 0 10px
      display: block
      ul
        height: 100%
        width: fit-content
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        transform: translateX(0)
        transition: transform 0.6s
        // li.list-item:last-child
        //   .list-item-icon::after
        //     display: none
        li.list-item
          height: 54px
          display: flex
          cursor: pointer
          margin-right: 3px
          .list-item-icon
            width: 54px
            height: 54px
            padding: 3px
            background-color: #95caff
            border-radius: 50%
            position: relative
            margin-right: 5px
            // top: 0
            // left: 8.5%
            // z-index: 6
            // cursor: pointer
            .list-item-char
              width: 48px
              height: 48px
              line-height: 48px
              text-align: center
              font-size: 18px
              color: #fff
              border: 1px solid #fff
              border-radius: 50%
        .list-item-content
          padding-top: 5px
          .list-item-top,.list-item-bottom
            height: 20px
            font-size: 14px
            color: #555
        .list-item-arrow
          width: 36px
          height: 13px
          margin-top: 22px
    .list-item:last-child>.list-item-arrow
      display: none
  .wrap-content
    display: flex
    height: 560px
    background-color: #ffffff
    .wrap-menu
      flex: 2
      display: flex
      flex-direction: column
      overflow: auto
      border: 1px solid #e0e0e0
      .menu-item
        border-bottom: 1px solid #e0e0e0
        cursor: pointer
        color: #333
        font-size: 14px
        text-align: center
        line-height: 20px
        max-height: 60px
        min-height: 40px
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        flex: 1
        .menu-item-label
          height: 20px
        .menu-item-count
          height: 20px
        &:hover
          color: #fff
          background-color: #29a1f7
      .menu-item-active
        color: #fff
        background-color: #29a1f7
      .menu-item-zero
        background-color: #fff !important
        color:  lightgray !important
        cursor: default !important
    .content-data
      border: 1px solid #e0e0e0
      border-left: 0
      flex: 8
      height: 100%
      // box-shadow: 0px 0px 10px #dfdfdf
      overflow: auto
      height: auto
      .content-title
        font-size: 16px
        font-weight: 900
        // color: #53616c
        color: #555
        border-left: 3px solid #29a1f7
        margin: 20px 15px 8px
        padding-left: 5px
/deep/.important-wrap
  height: auto !important
</style>
